<template>
	<view class="an-msg">
		
		<!-- 留言表单 -->
		<form @submit="formSubmit">
			<view class="uni-form-item uni-column">
				<input v-model.trim="from.name" :disabled="'true'" class="uni-input" name="title" placeholder="用户名" maxlength=50 />
			</view>
			<view class="uni-form-item uni-column">
				<textarea v-model.trim="from.msg" 
					class="uni-input an-textarea" 
					name="content" 
					focus 
					auto-height 
					show-confirm-bar
					@confirm="formSubmit"
					maxlength=1000 
					placeholder="请输入留言内容部分"/>
			</view>
			<view class="uni-btn-v">
				<button type="primary" class="an-btn" :disabled='isDisabled' @tap='formSubmit'>提交</button>
			</view>
		</form>
		
		<!-- 评论留言列表 -->
		<view class="uni-padding-wrap">
			<view class="uni-comment">
				<view class="uni-comment-list" v-for="item in msgList" :key="item.id">
					<view class="uni-comment-face"><image :src="item.avatarurl" mode="widthFix"></image></view>
					<view class="uni-comment-body">
						<view class="uni-comment-top">
							<text>{{item.user_name}}</text>
						</view>
						<view class="uni-comment-content">{{item.msg}}</view>
						<view class="uni-comment-date">
							<text>{{item.create_time}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import {mapActions} from 'vuex'
	import Api from '@/common/vmeitime-http/'
	export default {
		data() {
			return {
				from:{
					name:'',
					msg:'',
					type: 5,	// 1 PC用户   2手机登录用户  3手机匿名用户   5安然打卡
					openid:''
				},
				isDisabled: true,	// 提交按钮禁用
				msgList:[], // 留言列表
				msg_total: 0, // 显示留言条数
			}
		},
		onLoad(){
			this.getSysInt()
		},
		onShow(){
			this.anLoad()
		},
		methods: {
			...mapActions(['getUserInfo','getUserOpenId']),
			anLoad(){
				this.getUserInfo().then(res=>{	// 获取用户信息 
					this.from.name = res.nickName
					this.isDisabled = false
				})
				this.getUserOpenId().then(res=>{	// 获取openid
					this.from.openid = res
				})
			},
			// 获取系统配置
			getSysInt(){
				Api.getSys().then(res=>{
					this.msg_total = res.msg_total
					this.getList(res.msg_total);
				})
			},
			// 获取留言数据
			getList(perpage){
				this.msgList = []
				if(perpage){
					let nd = {
						page: 1,
						perpage: perpage,
						type:5
					}
					Api.getMsg(nd).then(res=>{
						this.msgList = res.list
					})
				}
			},
			formSubmit(){
				if(util.isEmptyValue(this.from.name)) {	// 用户名为空不提交
					return
				}
				if(util.isEmptyValue(this.from.msg)){
					uni.showToast({ title: '内容不能为空！', icon: "none" });
				}else{
					let nd = {...this.from}
					this.formReset()
					uni.showLoading({ title: '发送中...'})
					this.$api.addMsg(nd).then(res=>{
						uni.hideLoading()
						this.getList(this.msg_total);
						uni.showToast({title:"保存成功！", icon:"success"});
					})
				}
			},
			formReset(){	//清空表单
				this.from.msg = ''
			},
			
		}
	}
</script>

<style scoped>
.an-btn{
	border-radius: 20px;
	box-shadow: 0px 10px 8px #c9c9c9;
}
.uni-comment-date{
	color: #333333;
}
</style>
